<template>
    <div>
        <div id="echarOne" ref="chartOne" v-if="haveData"></div>
        <el-row :gutter="20">
            <el-col :span="12">
                <div style="letter-spacing: 1px font-weight: 900">
                    异常情况总数：<i
                        style="
                            font-size: 16px;
                            font-weight: 900;
                            color: #ff4040;
                        "
                        >{{totalAbnormal}}</i
                    >次
                </div>
            </el-col>
            <el-col :span="12">
                <div style="letter-spacing: 1px font-weight: 900">
                    近期产蛋周期：<i
                        style="
                            font-size: 16px;
                            font-weight: 900;
                            color: #9acd32;
                        "
                        >{{layEggCycle}}</i
                    >天
                </div></el-col
            >
        </el-row>
    </div>
</template>
<script>
export default {
    name: "echartOne",
    created() {
        // console.log("创建");
        // console.log(this.allData);
        this.totalAbnormal = this.allData.totalAbnormal;
        this.layEggCycle = this.allData.layEggCycle;
        // console.log(this.allData.totalAbnormal)
        if (this.allData.totalAbnormal === 0) {
            //判断是否有异常数据，有再显示
            this.haveData = false;
        } else {
            this.haveData = true;
        }
    },
    mounted() {
        if (this.haveData) {
            this.initCharts();
        }
    },
    updated() {
        // console.log("更新");
    },
    data() {
        return {
            data: [
                //饼图数据
                {
                    value: "",
                    name: "",
                },
                {
                    value: "",
                    name: "",
                },
                {
                    value: "",
                    name: "",
                },
                {
                    value: "",
                    name: "",
                },
            ],
            haveData: false, //是否有异常数据
            totalAbnormal: 0,
            layEggCycle: 0
        };
    },
    props: [ "allData"],
    methods: {
        //设置图表
        initCharts() {
            let that = this;
            // console.log("piedata");
            // console.log(that.data);
            // console.log(that.allData);
            let singleEgg = that.allData.singleEgg;
            let badEgg = that.allData.oneBad + that.allData.twoBad * 2;
            let damagedEgg =
                that.allData.oneDamaged + that.allData.twoDamaged * 2;
            let unfertilizedEgg =
                that.allData.oneUnfertilized + that.allData.twoUnfertilized * 2;
            that.totalAbnormal = that.allData.totalAbnormal;
            that.layEggCycle = that.allData.layEggCycle;

            that.data[0].name = "单蛋";
            that.data[0].value = singleEgg;
            that.data[1].name = "坏蛋";
            that.data[1].value = badEgg;
            that.data[2].name = "踩蛋";
            that.data[2].value = damagedEgg;
            that.data[3].name = "未受精蛋";
            that.data[3].value = unfertilizedEgg;

            let charOne = that.$echarts.init(that.$refs.chartOne);
            // console.log("图标里");
            // console.log(charOne);
            let legrndData = [];
            for (let i = 0; i < this.data.length; i++) {
                legrndData.push(this.data[i].name);
            }
            let option = {
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    top: "5%",
                    left: "left",
                    orient: "vertical",
                    data: legrndData,
                },
                title: [
                    {
                        left: "center",
                        text: "近一个月异常情况统计",
                    },
                ],
                series: [
                    {
                        name: "数据",
                        type: "pie",
                        radius: ["40%", "70%"],
                        avoidLabelOverlap: false,
                        left: "center",
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: "#fff",
                            borderWidth: 2,
                        },
                        label: {
                            show: false,
                            position: "center",
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: "40",
                                fontWeight: "bold",
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: that.data,
                    },
                ],
            };
            charOne.setOption(option);
        },
    },
};
</script>
<style lang="scss" scoped>
#echarOne {
    width: 350px;
    height: 300px;
}
</style>